<template>
  <el-drawer
    title="我是标题"
    size="70%"
    :visible.sync="visible"
    :with-header="false"
  >
    <div style="width:100%;height:100%;">
      <componentPreview :view="form"></componentPreview>
    </div>
  </el-drawer>
</template>

<script>
import componentPreview from './componentPreview'
import resourceApi from "@/api/resource";
export default {
  components:{componentPreview},
  props: {
    value: {
      id: 1
    }
  },
  watch: {
    value: {
      handler() {
        this.load();
      },
      deep: true
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    }
  },
  model: {
    prop: "value",
    event: "change"
  },
  data() {
    return {
      loading: false,
      visible: false,
      defaultLabelWidth: "150px",
      form: {},
      rules: {
        name: [{ required: true, message: "请输入", trigger: "change" }]
      }
    };
  },
  methods: {
    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      if (value) this.loadData(value);
    },
    hide() {
      this.visible = false;
      this.form = {
        id: ""
      };
    },
    loadData(value) {
      this.loading = true;
      this.$store
        .dispatch("viewComponent/get", value.id)
        .then(res => {
          res.cover = res.cover || {};
          res.size = res.size || {};
          res.resources = res.resources || [];

          this.form = res;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    commit() {
     
    },
    getComponentPreviewUrl(fileId)
    {
      return resourceApi.getComponentPreviewUrl(fileId);
    },
  }
};
</script>

<style></style>
